asp.net MVC

How to open and close a popup in asp.net mvc using Jquery?

How to open and close a popup in asp.net mvc using Jquery?, someone asked me to explain?

In this article, I describe how to open popup in mvc usingjquery. Here I am using jquery-ui.js and jquery-ui.css. Here I demonstrate with adding sales items. please referthese below link to add js and css file .

http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js

http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css

In Demo.cshtml

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>

<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">

        $(function () {

            $("#dialog").dialog({

                modal: true,
                autoOpen: false,
                title: "jQuery Dialog",
                width: 500,
                height: 250

            });

            $("#btnShow").click(function () {

                $('#dialog').dialog('open');

            });        
        
        });
 
        function Close() {
          $('#dialog').dialog('close');

        };

    </script>

  
@using (Html.BeginForm())

{

<input type="button" id="btnShow" value="ShowPopup" />
<div id="dialog" style="display: none" align="center">

    <fieldset>
        <legend>Add Item</legend>
        <table>
            <tr>
                <td>
                    <label>ItemName :</label>
                </td>
                <td>
                    @Html.TextBox("ItemName")
                </td>
            </tr>
            <tr>
               <td>
                    <label>Qty :</label>
                </td>
                <td>
                     @Html.TextBox("Qty")
                </td>
            </tr>
            <tr>
                <td>
                    <label>Sales Price :</label>
               </td>
                <td>
                    @Html.TextBox("UnitPrice")
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="button" value="Save" onclick="Add()" />
                    <input type="button" value="Cancel" onclick="Close()" />
                    <br />
                   <br />
              </td>
            </tr>
         </table>
    </fieldset>
</div>
}
 

Post your comments / questions